<template>
  <h3>案例：图例滚动、柱状图渐变负数</h3>
  <p>
    如果要设置图例组件的左右两边的距离，可以设置left或right，但这两个属性不能同时生效，优先生效left。
  </p>
  <p>
    设置图例的type为'scroll'后，可开启图例分页的效果，echart会自动判断图例是否需要分页。
  </p>
  <code-demo :code="htmlCode" :scriptCode="scriptCode">
    <chart-base
      style="width: 500px; height: 300px"
      :option="option"
    ></chart-base>
  </code-demo>
</template>

<script setup>
import {
  gradientColor,
  gridRight,
  gridTop,
  axisLineColor,
  xAxisLabelColor,
  xAxisLabelFontSize,
  xAxisLabelMargin,
  yAxisLabelColor,
  yAxisLabelFontSize,
  yAxisLabelMargin,
  nameColor,
  nameFontSize,
  legendFontSize,
  legendLineHeight,
  legendGap,
  legendTop,
  legendRectWidth,
  legendRectHeight,
  barBorderRadius,
  barWidth,
} from 'ui-lib/components/chart/style'

const option = {
  grid: {
    containLabel: false,
    left: 60,
    right: gridRight,
    top: gridTop,
    bottom: 53,
  },
  legend: {
    type: 'scroll',
    gap: legendGap,
    top: legendTop,
    itemWidth: legendRectWidth,
    itemHeight: legendRectHeight,
    borderRadius: legendLineHeight,
    height: legendLineHeight,
    textStyle: {
      fontSize: legendFontSize,
      lineHeight: legendLineHeight,
    },
  },
  xAxis: {
    type: 'category',
    data: ['1月', '2月', '3月'],
    axisTick: {
      show: false,
    },
    axisLabel: {
      margin: xAxisLabelMargin,
      color: xAxisLabelColor,
      fontSize: xAxisLabelFontSize,
    },
    axisLine: {
      lineStyle: {
        color: axisLineColor,
      },
    },
  },
  yAxis: [
    {
      type: 'value',
      name: '百分比',
      nameTextStyle: {
        color: nameColor,
        fontSize: nameFontSize,
        align: 'right',
        padding: [0, yAxisLabelMargin, 0, 0],
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: axisLineColor,
        },
      },
      axisLabel: {
        color: yAxisLabelColor,
        margin: yAxisLabelMargin,
        fontSize: yAxisLabelFontSize,
        formatter(value) {
          return `${value * 100}%`
        },
      },
    },
  ],
  series: [
    {
      name: '增长率增增长率增长增长率增长长',
      data: [
        0.04,
        0.02,
        {
          value: -0.03,
          itemStyle: { borderRadius: [0, 0, barBorderRadius, barBorderRadius] },
        },
      ],
      type: 'bar',
      barWidth,
      itemStyle: {
        borderRadius: [barBorderRadius, barBorderRadius, 0, 0],
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: gradientColor.purple[0] },
            { offset: 1, color: gradientColor.purple[1] },
          ],
        },
      },
    },
    {
      name: '增长率增长率增率增率',
      data: [
        0.04,
        0.02,
        {
          value: -0.03,
          itemStyle: { borderRadius: [0, 0, barBorderRadius, barBorderRadius] },
        },
      ],
      type: 'bar',
      barWidth,
      itemStyle: {
        borderRadius: [barBorderRadius, barBorderRadius, 0, 0],
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: gradientColor.blue[0] },
            { offset: 1, color: gradientColor.blue[1] },
          ],
        },
      },
    },
    {
      name: '增长率增长率',
      data: [
        0.04,
        0.02,
        {
          value: -0.03,
          itemStyle: { borderRadius: [0, 0, barBorderRadius, barBorderRadius] },
        },
      ],
      type: 'bar',
      barWidth,
      itemStyle: {
        borderRadius: [barBorderRadius, barBorderRadius, 0, 0],
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: gradientColor.green[0] },
            { offset: 1, color: gradientColor.green[1] },
          ],
        },
      },
    },
  ],
}

const htmlCode = `<chart-base
  style="width: 500px; height: 300px"
  :option="option"
></chart-base>`

const scriptCode = `import {
  gradientColor,
  gridRight,
  gridTop,
  axisLineColor,
  xAxisLabelColor,
  xAxisLabelFontSize,
  xAxisLabelMargin,
  yAxisLabelColor,
  yAxisLabelFontSize,
  yAxisLabelMargin,
  nameColor,
  nameFontSize,
  legendFontSize,
  legendLineHeight,
  legendGap,
  legendTop,
  legendRectWidth,
  legendRectHeight,
  barBorderRadius,
  barWidth,
} from 'ui-lib/components/chart/style'

const option = {
  grid: {
    containLabel: false,
    left: 60,
    right: gridRight,
    top: gridTop,
    bottom: 53,
  },
  legend: {
    type: 'scroll',
    gap: legendGap,
    top: legendTop,
    itemWidth: legendRectWidth,
    itemHeight: legendRectHeight,
    borderRadius: legendLineHeight,
    height: legendLineHeight,
    textStyle: {
      fontSize: legendFontSize,
      lineHeight: legendLineHeight,
    },
  },
  xAxis: {
    type: 'category',
    data: ['1月', '2月', '3月'],
    axisTick: {
      show: false,
    },
    axisLabel: {
      margin: xAxisLabelMargin,
      color: xAxisLabelColor,
      fontSize: xAxisLabelFontSize,
    },
    axisLine: {
      lineStyle: {
        color: axisLineColor,
      },
    },
  },
  yAxis: [
    {
      type: 'value',
      name: '百分比',
      nameTextStyle: {
        color: nameColor,
        fontSize: nameFontSize,
        align: 'right',
        padding: [0, yAxisLabelMargin, 0, 0],
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: axisLineColor,
        },
      },
      axisLabel: {
        color: yAxisLabelColor,
        margin: yAxisLabelMargin,
        fontSize: yAxisLabelFontSize,
        formatter(value) {
          return \`\${value * 100}%\`
        },
      },
    },
  ],
  series: [
    {
      name: '增长率增增长率增长增长率增长长',
      data: [
        0.04,
        0.02,
        {
          value: -0.03,
          itemStyle: { borderRadius: [0, 0, barBorderRadius, barBorderRadius] },
        },
      ],
      type: 'bar',
      barWidth,
      itemStyle: {
        borderRadius: [barBorderRadius, barBorderRadius, 0, 0],
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: gradientColor.purple[0] },
            { offset: 1, color: gradientColor.purple[1] },
          ],
        },
      },
    },
    {
      name: '增长率增长率增率增率',
      data: [
        0.04,
        0.02,
        {
          value: -0.03,
          itemStyle: { borderRadius: [0, 0, barBorderRadius, barBorderRadius] },
        },
      ],
      type: 'bar',
      barWidth,
      itemStyle: {
        borderRadius: [barBorderRadius, barBorderRadius, 0, 0],
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: gradientColor.blue[0] },
            { offset: 1, color: gradientColor.blue[1] },
          ],
        },
      },
    },
    {
      name: '增长率增长率',
      data: [
        0.04,
        0.02,
        {
          value: -0.03,
          itemStyle: { borderRadius: [0, 0, barBorderRadius, barBorderRadius] },
        },
      ],
      type: 'bar',
      barWidth,
      itemStyle: {
        borderRadius: [barBorderRadius, barBorderRadius, 0, 0],
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: gradientColor.green[0] },
            { offset: 1, color: gradientColor.green[1] },
          ],
        },
      },
    },
  ],
}`
</script>
